<html lang="en" class=" ">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>极返</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
    <link rel="stylesheet" href="./css/product.css" />
    <!-- 引入rem自适应类库 -->
    <script src="./js/flexible.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
    <div id="productDetail" v-cloak>
        <van-nav-bar left-arrow
            title="商品详情"
            @click-left="onClickLeft"></van-nav-bar>

        <div class="product-images">
            <van-swipe :autoplay="3000" indicator-color="white" v-if="productDetail.small_images.length > 0">
                <van-swipe-item v-for="(image, index) in productDetail.small_images" :key="index">
                    <img :src="image" />
                </van-swipe-item>
            </van-swipe>

            <div class="show-quan" v-if="coupon_money">
                <div>减{{coupon_money}}元</div>
                <div>领券</div>
            </div>
        </div>    
        
        <van-row type="flex" class="product-title">
            <van-col class="icon-coupon" v-if="productDetail['coupon_money']"></van-col>
            <van-col>{{productDetail.title}}</van-col>
        </van-row>

        <van-row type="flex" justify="space-between" class="price-info">
            <van-col>
                <span class="current">￥<em>{{productDetail['zk_final_price']}}</em></span>
                <del class="origin">￥{{productDetail['zk_final_price']}}</del>
            </van-col>
            <!-- <van-col>
                <span>￥5.0</span>
                <div>双倍奖励金</div>
            </van-col> -->
        </van-row>

        <van-row type="flex" justify="space-between" class="reward-sales">
            <!-- <van-col class="reward">
                奖励金 x3
            </van-col> -->
            <van-col></van-col>
            <van-col class="sales">
               月销：{{productDetail['tk_total_sales']}}
            </van-col>
        </van-row>

        <van-goods-action>
            <van-goods-action-mini-btn
              text="分享"
              @click="shareMask = !shareMask"
              class="share"
            ></van-goods-action-mini-btn>

            <van-goods-action-big-btn
              primary
              text="省钱购买"
              class="buy"
              id="copy-btn"
              @click="onBuy"
              data-clipboard-target="#coupon-copy"
            ></van-goods-action-big-btn>
        </van-goods-action>

        <input hidden id="coupon-copy" type="text" v-model="tkl" />

        <div class="shareMask" v-if="shareMask" @click="shareMask = false"></div>

        <van-popup v-model="show">复制成功</van-popup>
    </div>

    <!-- 引入组件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>

    <!-- 复制插件 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.6.1/clipboard.js"></script>
    <script>
        new Vue({
            el: '#productDetail',
            data() {
                return {
                    shareMask: false,
                    itemId: '',
                    show: false,
                    userId: '',
                    tkl: '',
                    coupon_money: '',
                    productDetail: {
                        small_images: [],
                    }
                }
            },
            mounted() {
                window.addEventListener('resize', this.handleResize, true);
            },
            created() {
                setTimeout(() => {
                    this.handleResize();
                }, 100);
                this.init();
            },
            methods: {
                handleResize() {
                    let productImages = document.getElementsByClassName("product-images")[0];
                    let width = document.documentElement.clientWidth || document.body.clientWidth;
                    if (productImages) {
                        productImages.style.height = width + 'px';
                    }
                },
                init() {
                    let data = [];    
                    this.itemId = this.getQueryString("item_id");
                    this.userId = this.getQueryString("user_id");
                    $.ajax('http://search.jifan.dxanm.com/shop/index', {
                        data: {},
                        dataType: 'jsonp',
                        crossDomain: true,
                        success: ((res) => {
                            let result = res.data.result_list.map_data;
                            let data = result.filter(item => item.num_iid == this.itemId);
                            if (data[0]) {
                                this.productDetail = data[0];
                                this.productDetail.small_images = data[0].small_images.string;
                            }
                        })
                    })
                    
                    this.getCoupon();
                },
                getQueryString(name) {
                    let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
                    let r = window.location.search.substr(1).match(reg);
                    if(r != null) {
                        return unescape(r[2]);
                    }
                    return null;
                },
                onClickLeft () {
                    window.location.href = './productList.html?user_id='+ this.userId;
                },
                getCoupon() {
                    $.ajax('http://coupon.dxanm.com/coupon/get?user_id='+ this.userId +'&item_id='+ this.itemId, {
                        data: {},
                        dataType: 'jsonp',
                        crossDomain: true,
                        success: ((res) => {
                            let data = res.data;
                            this.coupon_money = data.coupon_money;
                            this.tkl = data.tkl;
                        })
                    })
                },
                onBuy() {
                    let clipboard = new Clipboard('#copy-btn');
                    let _this = this;
                    clipboard.on('success', function(e) {
                        _this.show = true;
                    });
                }
            }
        })
    </script>
</body>

</html>